Pyramid's embedding capabilities allow the user to embed the content DIRECTLY in the hosting page through standard HTML tags, like DIV. This makes the solution significantly lighter, faster, and ultimately more scalable. However, in rare instances, there can be some complications when combining Pyramid content directly with preexisting HTML, CSS, and JavaScript web pages.
Styling Clashes
When a page's CSS style directives conflict with Pyramid, the resulting analytic visualizations from Pyramid can be destroyed or result in visual or functional 'bugginess'.
How to Detect
Try and run your embedded content in a blank HTML page and see if things operate normally. If they do, it's likely one or more of your CSS style sheets are affecting Pyramid.
How to Resolve
The best approach (and best practice for HTML5 in general), is to ensure all your CSS styles are driven through style classes or tag ID's only. Using styling for general tags will have the unintended consequence of affecting the same tag structures in the Pyramid content as well.
An alternative (unrecommended) approach is to house Pyramid in an IFrame on the page which is isolated from the page's own CSS styling. While this will produce a faster development result, it will reduce the scalability of the solution.
JavaScript Clashes
Although this occurs far less frequently, it's possible that other JavaScript code on the host page may interrupt Pyramid's operations. This may include the way the page loads or interruptions with the way Pyramid calls its content service.
How to Detect
Try and run your embedded content in an HTML page without any other JavaScript logic or third-party libraries and see if things operate normally.
How to Resolve
The only solution, after detecting the clash, is to reconsider your JavaScript code and remove the offending elements. When this does occur, please submit a ticket to Pyramid support so they can review the issue as well.